


body > header,
.page-header {
    z-index: 1;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 4rem;
    max-height: 4rem;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    border-bottom: solid 2px var(--color-primary);
}
@media (min-width: 30rem) {
    body > header,
    .page-header {
        max-height: 5rem;
    }
}
@media (min-width: 40rem) {
    body > header,
    .page-header {
        max-height: 6rem;
    }
}


body > header .header-title,
.page-header .header-title,
.page-header .page-header-title {
    font-size: var(--font-size-x-large);
}
body > header .header-title:hover,
.page-header .header-title:hover,
.page-header .page-header-title:hover {
    color: var(--color-primary);
}


body > header .icon,
.page-header .icon {
    display: none;
    cursor: pointer;
    background-image: url("/favicon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 120%;

    margin: 0;
    margin-left: 5vw;
    padding: 0.5rem;
    object-fit: fill;
    width: 30%;
    min-width: 6rem;
    max-width: 8rem;
    height: 100%;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}
@media (min-width: 45rem) {
    body > header .icon,
    .page-header .icon {
        display: block;
    }
}



body > header nav,
.page-header nav,
.nav,
body > header nav.close,
.page-header nav.close
.nav.close {
    margin: 0.5rem;
}


@keyframes nav-close {
    0% {
        /* position: absolute;
        width: 100vw;
        height: 100vh;
        width: 100dvw;
        height: 100dvh; */
        width: 40px;
        height: 2rem;
        scale: 4 3;
    }

    100% {
        width: 40px;
        height: 2rem;
        scale: 1;
    }
}


/* nav hide */
@media (min-width: 35rem) {

    body > header nav.close,
    .page-header nav.close,
    .nav.close {
        margin-top: 0;
        /* background: none; */
        visibility: hidden;
        width: auto;
        height: 100%;
        transform-origin: center top;
        transition: width 0s, visibility 1s;
        animation: nav-hide 1s;
    }
    

    body > header nav.close *,
    body > header nav.close .nav-item,
    .page-header nav.close *,
    .page-header nav.close .nav-item,
    .nav.close *,
    .nav.close .nav-item {
        visibility: visible;
    }

    body > header nav.close > ul,
    body > header nav.close > .nav-item,
    .page-header nav.close > ul,
    .page-header nav.close > .nav-item,
    .nav.close > ul,
    .nav.close > .nav-item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }


    body > header nav,
    .page-header nav,
    .nav {
        margin-top: 0;
        /* background: none; */
        visibility: hidden;
        width: 12%;
        height: 100%;
        transform-origin: center top;
        transition: width 0s, visibility 1s;
        animation: nav-hide 1s;
    }
    

    body > header nav:hover,
    .page-header nav:hover,
    .nav:hover {
        cursor: default;
        background: none;
    }

    body > header nav *,
    .page-header nav *,
    .nav *,
    .nav .nav-item {
        visibility: visible;
        transition: visibility 1s;
        transform: translateY(0%);
        animation: nav-item-show 1s;
    }

}


@media (min-width: 35rem) {
    /* 右边距 */
    body > header .wrapper-nav,
    .page-header .wrapper-nav {
        margin-right: 5vw;
    }
}



